/* eslint-disable vue/no-unused-vars */
<!--
 * @Author: wangc
 * @Date: 2020-08-08 18:42:18
 * @LastEditTime: 2020-08-30 15:00:33
 * @Description: 
-->
<template>
  <div id="main">
    <!-- 欢迎你：{{username}}
    <br/>
    <button @click="quitLogin">退出登录</button>-->
    <div id="menu">
      <el-button
        type="info"
        icon="el-icon-s-unfold"
        circle
        @click="changeCollapse"
        style="background-color:#334157;margin-left:20px"
      ></el-button>
      <el-menu
        mode="vertical"
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        background-color="#334157"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item index="1-1" @click="openLine">折线图</el-menu-item>
            <el-menu-item index="1-2" @click="openBar">柱状图</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3" @click="openPie">饼状图</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2" @click = "openSearch">
          <i class="el-icon-menu"></i>
          <span slot="title" >搜索</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div id="container">
      <el-container style="height:100%">
        <el-header></el-header>
        <el-main>
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
              v-for="(item) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
             <tab-component :is=item.content></tab-component>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import lineChart from "./echarts/lineChart"
import pie from "./echarts/pieChart"
import bar from "./echarts/barChart"
import search from "./Search"
export default {
  data() {
    return {
      username: "",
      isCollapse: true,
      editableTabsValue: '1',
        editableTabs: [],
    };
  },
  components: {
      lineChart,
      bar,
      pie,
      search
    },
  created() {
    this.username = localStorage.getItem("username");
  },
  mounted() {
    console.log(this.$route.query.login);
  },
  watch: {},
  methods: {
    /**
     * 退出登录时需要做的操作，清除缓存
     */
    quitLogin() {
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      this.$router.replace("/login");
    },
    /**改变左侧菜单栏的展开折叠 */
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    /**添加标签页 */
    addTab(targetName,name,content) {
      //如果已经打开了标签页，就不添加了。
      /**isOpen 用来记录是否已经打开了该标签页， */
      let isOpen = false;
      this.editableTabs.forEach(tab=>{
        if(tab.name == name){
          this.editableTabsValue = name;
          isOpen = true;
          return;
        }
      })
      if(!isOpen){
        this.editableTabs.push({
          title: targetName,//标签页的标签名
          name: name,//标签页的key值，每一个页面的name都不一样，通过this.editableTabsValue = name来控制显示哪个标签页。
          content: content,//显示的组件名
        });
        this.editableTabsValue = name;
      }
      },
    /**删除标签页 */
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
    /**点击菜单栏上的折线图 */
    openLine(){
      this.addTab("折线图","line","lineChart");
    },
    openBar(){
      this.addTab("柱状图","bar","bar");
    },
    openPie(){
      
    },
    openSearch(){
      this.addTab("搜索","search","search");
    }
  
  },
};
</script>
<style lang="less" scoped>
#main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
/**=======================================左侧菜单栏的样式开始 */
#main > #menu {
  height: 100%;
  background-color: #334157;
  .el-menu{
    border:0px;
  }
}
/**=======================================左侧菜单栏的样式结束 */

/**=======================================右侧内容的样式开始 */
#main > #container {
  height: 100%;
  flex-grow: 1;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  width: 100%;
  height: 10%;
}
.el-main {
  width: 100%;
  height: 90%;
}
/**=======================================右侧内容的样式结束 */
</style>